<template>
  <div class="goods-list-wrapper">
    <div class="goods-list-box" id="tree">
      <waterfall :col="5" :data="GoodsData" @loadmore="load" :isTransition="true" :loadDistance="100">
        <template>
          <div class="goods-con-box pr pbImgBox" v-for="(item,index) in GoodsData" :key="index">
            <img :src="item.pict_url" alt=""  @click="toGoodsInfo(item)">
            <p class="goods-title">{{item.title}}</p>
            <div class="goods-con-bot">
              <div>
                <p class="goods-sub del-text">售价</p>
                <p class="goods-price del-text">￥{{item.reserve_price}}</p>
              </div>
              <div>
                <p class="goods-sub">折扣价</p>
                <p class="goods-price goods-price-new">￥{{item.zk_final_price}}</p>
              </div>
              <div>
                <p class="goods-sub">月销</p>
                <p class="goods-sub">{{item.volume}}</p>
              </div>
            </div>
          </div>
        </template>
      </waterfall>
    </div>
  </div>
</template>

<script>
  import { searchGoods } from '@/api/Goods';
  import { Loading } from 'element-ui';
  export default {
    name: "list",
    props: ['categoryId', 'searchGoodsName', 'goodsWhere'],
    data () {
      return {
        GoodsData: [],
        query: {
          page: 1,
          limit: 18,
          q: this.searchGoodsName, //商品筛选-查询词
          category_id: this.categoryId, //类别ID(多个逗号隔开)
        }
      }
    },
    mounted() {
      this.getGoodsData();
    },
    methods: {
      load(){
        let loading = Loading.service({
          lock: false,
          text: '商品加载中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.query.page = this.query.page + 1;
        searchGoods(this.query).then(res => this.GoodsData = this.GoodsData.concat(res))
        loading.close();
      },
      toGoodsInfo(goodsInfo){
        let goodsData = {
          web: 'info',
          title: goodsInfo.title,
          reserve_price: goodsInfo.reserve_price,
          zk_final_price: goodsInfo.zk_final_price,
          coupon_amount: goodsInfo.coupon_amount,
          volume: goodsInfo.volume,
          coupon_start_time: goodsInfo.coupon_start_time,
          coupon_end_time: goodsInfo.coupon_end_time,
          item_id: goodsInfo.item_id,
          click_url: goodsInfo.click_url,
          item_url: goodsInfo.item_url,
          coupon_share_url: goodsInfo.coupon_share_url,
          pict_url: goodsInfo.pict_url,
          url: goodsInfo.url
        };
        if(typeof goodsInfo.small_images == 'undefined'){
          goodsData.small_images = [goodsInfo.pict_url, goodsInfo.pict_url];
        }else{
          if(typeof goodsInfo.small_images.string == 'string'){
            goodsData.small_images = [goodsInfo.small_images.string, goodsInfo.small_images.string];
          }else{
            goodsData.small_images = goodsInfo.small_images.string;
          }
        }
        const { href } = this.$router.resolve({
          name: "goodsInfo",
          query: goodsData
        });
        window.open(href, '_blank')
      },
      getGoodsData() {
        this.query.page = 1;
        searchGoods(this.query).then(res => this.GoodsData = res)
      },
    },
    watch: {
      categoryId(categoryId) {
        this.query.category_id = categoryId;
        this.query.q = '';
        this.getGoodsData();
      },
      searchGoodsName(searchGoodsName) {
        this.query.q = searchGoodsName;
        this.query.category_id = '';
        this.getGoodsData();
      },
      goodsWhere: {
        handler: function (value) {
          this.query = JSON.parse((JSON.stringify(this.query) + JSON.stringify(value)).replace(/}{/, ','));
          this.getGoodsData();
        },
        deep: true
      }
    }
  }
</script>

<style scoped>
.goods-list-wrapper{
  width: 100%;
  min-height: 600px;
  display: flex;
  justify-content: center;
  padding:15px 0px;
}
.goods-list-wrapper .goods-list-box{
  width: 1200px;
  padding:15px 0px;
  box-sizing: border-box;
}
.goods-con-box{
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  box-sizing: border-box;
  padding:5px 10px;
  margin:10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.07),
  0 4px 8px rgba(0, 0, 0, 0.07), 0 8px 16px rgba(0, 0, 0, 0.07),
  0 16px 32px rgba(0, 0, 0, 0.07), 0 32px 64px rgba(0, 0, 0, 0.07);
  transition: all 0.5s;
}
.goods-con-box:hover {
  box-shadow: none;
}
.goods-con-box img{
  width: 100%;
  height: 100%;
  border-radius: 5px;
}
.goods-con-box .goods-con-bot{
  display: flex;
  flex-direction: row;
  justify-content:space-between;
  text-align: center;
}
.goods-con-box .goods-con-bot p{
  font-size: 13px;
}
.goods-con-box .goods-con-bot .goods-sub{
  color:#686868;
}
.goods-con-box .goods-con-bot .goods-price{
  color: #FF4400;
}
.goods-con-box .goods-con-bot .goods-price-new{
  color: #FF4400;
  font-size: 16px;
}
.goods-con-box .goods-title{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height:20px;
  font-size: 13px;
  padding:2px 3px;
  color: #686868;
}
.del-text{
  text-decoration:line-through;
}
</style>